
<html>
<head>
    <title>WebChat | 聊天</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../view/statics/plugins/amaze/css/amazeui.min.css">
    <link rel="stylesheet" href="../view/statics/plugins/amaze/css/admin.css">
    <link rel="stylesheet" href="../view/statics/plugins/contextjs/css/context.standalone.css">
    <script src="../view/statics/plugins/jquery/jquery-2.1.4.min.js"></script>
    <script src="../view/statics/plugins/amaze/js/amazeui.min.js"></script>
    <script src="../view/statics/plugins/amaze/js/app.js"></script>
    <script src="../view/statics/plugins/layer/layer.js"></script>
    <script src="../view/statics/plugins/laypage/laypage.js"></script>
    <script src="../view/statics/plugins/contextjs/js/context.js"></script>
</head>
<body>
<header class="am-topbar admin-header">
    <div class="am-topbar-brand">
        <i class="am-icon-weixin"></i> <strong>WebChat</strong> <small>网页聊天室</small>
    </div>
    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;" id="nick">
                     <span class="am-icon-caret-down"></span>
                </a>
            </li>
        </ul>
    </div>
</header>
<div class="am-cf admin-main">
<!-- sidebar start -->
<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
    <div class="am-offcanvas-bar admin-offcanvas-bar">
        <ul class="am-list admin-sidebar-list">
            <li><a href="index.html"><span class="am-icon-commenting"></span> 聊天</a></li>
            <li><a href="information.html" class="am-cf"><span class="am-icon-book"></span> 个人信息<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
            <li class="admin-parent">
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-cogs"></span> 设置 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
                    <li><a href="/demo/chatuser.html"><span class="am-icon-group"></span> 个人设置</a></li>
                    <li><a href="user_space.html"><span class="am-icon-cog"></span>心情动态</a></li>                 
                </ul>
            </li>
           <li><a href="friend.html"><span class="am-icon-globe"></span>好友动态</a></li>        
            <li><a href="log.html"><span class="am-icon-inbox"></span> 系统日志<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li>
            <li><a href="login.html"><span class="am-icon-sign-out"></span> 注销</a></li>
        </ul>
        <div class="am-panel am-panel-default admin-sidebar-panel">
            <div class="am-panel-bd">
                <p><span class="am-icon-tag"></span> Welcome</p>
                <p>欢迎使用WebChat聊天室~</p>
            </div>
        </div>
    </div>
</div>
<!-- sidebar end -->
    <!-- content start -->
    <div class="admin-content"  >
        <div class="" style="width: 80%;float:left;">
            <!-- 聊天区 -->
            <div class="am-scrollable-vertical" id="chat-view" style="height: 310px;">
                <ul class="am-comments-list am-comments-list-flip" id="chat">


                </ul>
            </div>
            <!--输入区-->
            <div class="am-form-group am-form">
                <textarea class="" id="message" name="message" rows="5"  placeholder="这里输入你想发送的信息..."></textarea> 
            </div>
            <!-- 接收者 -->
            <div class="" style="float: left">
                <p class="am-kai">发送给 : <span id="sendto"></span></p>
                <input type="hidden" id="faid" name="id" value="">
            </div>
            <!-- 按钮区 -->
            <div class="am-btn-group am-btn-group-xs" style="float:right;"> 
                <button class="am-btn am-btn-default" type="button" onClick="sendMessage()"><span class="am-icon-commenting"></span> 发送</button>
            </div>
        </div>
        <!-- 列表区 -->
        <div class="am-panel am-panel-default" style="float:right;width: 20%;">
            <div class="am-panel-hd">
                <h3 class="am-panel-title">好友列表 [23]</h3>
            </div>

            <!--所有的好友-->
            <ul class="am-list am-list-static am-list-striped" id="friends" >

            </ul>

        </div>
    </div>
    <!-- content end -->
</div>
<a href="#" class="am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}">
    <span class="am-icon-btn am-icon-th-list"></span>
</a>
<footer style="text-align: center">
    <hr>
<p class="am-padding-left">© 2016 <a href="http://www.qianchengzhidao.com">oracle北京实训基地</a>. </p>
</footer>



<script>
    var loginuser = "";
    var toid = "";
    //好友信息
    window.onload =function () {
        massage();
    }

    /*不能初始的加载，点击之后再加载*/
    setInterval(function () {
        addChat(toid);
    },10000);

    $(function() {
        massage();
        run();             //加载页面时启动定时器
        var interval;         //定义一个定时器
        function run() {
            interval = setInterval(massage, "5000");   //定时的设置
        }
    });


        function massage() {
        $.ajax({
            type:"get",
            url:"/user/chatuser",
            async:true,
            /*data:JSON.stringify(data),*/
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success:function (data) {
                var its = "";
                var chatuserList = data.chatuserList;
                loginuser = data.loginuser;
                for(var i=0; i<chatuserList.length;i++){
                    var chatuser = chatuserList[i];
                    if(chatuser.wdxx==0){
                        its+="<li>"+chatuser.nickname+
                            "&nbsp;&nbsp;<button type='button' class='am-btn am-btn-xs am-btn-primary am-round' onclick='addChat("+chatuser.id+")'><span class='am-icon-phone'><span>私聊</button></li>";
                    }
                    if(chatuser.wdxx>0){
                        its+="<li>"+chatuser.nickname+
                            "&nbsp;&nbsp;<button class='am-btn am-btn-xs am-btn-danger' id='tuling' data-am-button onclick='addChat("+chatuser.id+")' >"+chatuser.wdxx+"</button>"+
                            "</li>";
                    }

                }
                $("#friends").html(its);
                $("#nick").html(loginuser.nickname);

            }
        });

    }
    function addChat(id) {
        toid  = id;
        $.ajax({
            type:"get",
            url:"/user/findchatuser?toid="+id,
            async:true,
            /*data:JSON.stringify(data),*/
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success:function (data) {
                var chatuser = data.chatuser;
                $("#sendto").html(chatuser.nickname);
                $("#faid").val(chatuser.id);
                var messageList = data.messageList;


                var itss = "";
                for(var i=0;i<messageList.length; i++){
                    var message =messageList[i];
                    if(message.fromid==loginuser.id){
                        itss +="<li class='am-comment am-comment-flip   am-comment-primary'>"+
                            "<a href='#link-to-user-home'>"+
                            "<img width='48' height='48' class='am-comment-avatar' alt='' src='../view/statics/source/img/default_head.jpg'></a>" +
                            "<div class='am-comment-main'>"+
                            "<header class='am-comment-hd'>"+
                            "<div class='am-comment-meta'>"+
                            "<a class='am-comment-author' href='#link-to-user'>"+message.fsz+"</a> 发表于" +
                            "<time>"+message.time+"</time> 发送给:"+message.jsz+" </div>"+
                            "</header>" +
                            "<div class='am-comment-bd'> <p>"+message.content+"</p></div>" +
                            "</div></li> ";

                    }else {
                        itss += "<li class='am-comment   am-comment-primary'>" +
                            "<a href='#link-to-user-home'>" +
                            "<img width='48' height='48' class='am-comment-avatar' alt='' src='../view/statics/source/img/default_head.jpg'></a>" +
                            "<div class='am-comment-main'>" +
                            "<header class='am-comment-hd'>" +
                            "<div class='am-comment-meta'>" +
                            "<a class='am-comment-author' href='#link-to-user'>" + message.fsz + "</a> 发表于" +
                            "<time>" + message.time + "</time> 发送给:" + message.jsz + " </div>" +
                            "</header>" +
                            "<div class='am-comment-bd'> <p>" + message.content + "</p></div>" +
                            "</div></li> ";
                    }

                    $("#chat").html(itss);

                }
            }
        });
    }
    function sendMessage() {
        var message = $("#message").val();
        if(message==null || message ==''){
            alert("你发的啥，你发的锤子！！！！")
        }
        var faid  = $("#faid").val();
        var data = {"toid":faid,"content":message};
        $.ajax({
            type:"post",
            url:"/mess/message",
            async:true,
            data:JSON.stringify(data),
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success:function (data) {
                if(data.status=="true"){
                    alert("发送成功");
                }
            }
        });

    }

</script>


</body>
</html>
